<template>
  <el-container class="license-warp">
    <div class="top">
      <FormPanel ref="formPanel" :list="formList" :cols="3" :labelWidth="110" formType="add" :isSubmitBtn="false" @formChange="getClssList" />
      <el-row>
        <el-button type="primary" :loading="addBtnState" @click="query">查 询</el-button>
        <el-button type="primary" :loading="addBtnState" @click="reset">重 置</el-button>
      </el-row>
    </div>
    <FilterTable
      ref="table"
      :columns="columns"
      columnsRef="hxrjkxxbjOwnerTable"
      :fetchapi="fetchApi"
      :params="fetchParams"
      selectionType="single"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="arr => (this.onChangeColumn = arr)"
    ></FilterTable>
    <div class="footer">
      <el-button type="primary" :loading="addBtnState" @click="saveDialog">确 定</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </el-container>
</template>
<script>
import { getClssList } from '@/api/customerRepair/monitor/monitorInfo';
import { dictionary } from '@/utils/dictMixin';
export default {
  name: 'SearchVehicleInfo',
  mixins: [dictionary],
  data() {
    return {
      formList: this.createFormList(),
      addBtnState: null,
      fetchApi: getClssList,
      fetchParams: { xhrAbort: true },
      columns: this.createTableColumns(),
      onChangeColumn: []
    };
  },
  // watch: {
  //   licenseNo: {
  //     handler(str) {
  //       console.log(str);
  //       this.formList.some(item => {
  //         console.log(item);

  //         if (item.fieldName === 'license') {
  //           item.initialValue = str;
  //           return true;
  //         }
  //       });
  //     },
  //     immediate: true
  //   }
  // },
  mounted() {
    this.query();
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '车主编号',
          fieldName: 'ownerNo',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '车主名称',
          fieldName: 'ownerName',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '车主拼音',
          fieldName: 'ownerSpell',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          placeholder: ''
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '车主编号',
          dataIndex: 'ownerNo',
          sorter: true
        },
        {
          title: '车主名称',
          dataIndex: 'ownerName',
          sorter: true
        },
        {
          title: '车主性质',
          dataIndex: 'ownerProperty',
          sorter: true,
          filter: true,
          filterType: 'input',
          align: 'center',
          render: (props, h) => {
            return <span> {this.createDictText(props.row.ownerProperty, '8011')} </span>;
          }
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          sorter: true
        },
        {
          title: '车牌号',
          dataIndex: 'license',
          sorter: true
        },
        {
          title: '地址',
          dataIndex: 'address',
          sorter: true
        }
      ];
    },
    formChangeHandle() {},
    query() {
      this.$refs.formPanel.SUBMIT_FORM();
    },
    reset() {
      this.$refs.formPanel.RESET_FORM();
      this.getClssList();
    },
    closeDialog() {
      this.$emit('closeDialog', false);
    },
    saveDialog() {
      this.$emit('saveDialog', this.onChangeColumn);
      this.closeDialog();
    },
    getClssList(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    }
  }
};
</script>
<style lang="less" scoped>
.license-warp {
  flex-direction: column;

  .top {
    width: 100%;
    display: flex;
    flex-direction: column;

    .el-row {
      text-align: center;
    }
  }

  .footer {
    text-align: center;
  }
}
</style>
